<template>
  <div class="detail">
    <h3>{{ detail.title }}</h3>
    <div v-html="detail.content"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { articleDetail } from '@/api/detail';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter();

const detail = ref('')
onMounted(() => {
  // console.log('proxy',ctx)
  const id = router.currentRoute.value.query.id
  console.log('id', id)
  articleDetail({ id }).then((res: Object) => {
    const { code, msg, data, } = res
    if (code == 200) {
      detail.value = data;
    } else {
      ElMessage.error(msg)
    }
  })
})
</script>

<style lang="less" scoped>
.detail {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
</style>
